<template>
  <div class="result">
    <head-top head-title="房屋认证结果" goBack="true"></head-top>
    <div class='head'>
      <span>认证的房屋</span>
    </div>
    <div class="home_show">
      <ul>
        <li class="border-bottom">
          <span>小区：</span>
          <span>{{list.title}}</span>
        </li>
        <li>
          <span>房屋：</span>
          <span>{{list.yuan}}{{list.zhuang}}幢{{list.danyuan}}单元{{list.fanghao}}</span>
        </li>
      </ul>
    </div>
    <div class='head'>
      <span>结果</span>
    </div>
    <div class="result_show">
      <ul>
        <li class="border-bottom">
          <span>进度：</span>
          <span v-if="list.progress === '通过'">{{list.progress}}</span>
          <span v-else style="color: #C80202">{{list.progress}}</span>
        </li>
       <!-- <li class="border-bottom">
          <span>状态：</span>
          <span v-html="list.flag ? '开启' : '关闭'"></span>
        </li>-->
        <li class="border-bottom">
          <span>信息：</span>
          <span>{{list.reply_message}}</span>
        </li>
      </ul>
    </div>
    <!--预留电话part-->
    <div class="phone_part" v-if="status == 1">
      <div class="phone_choice" @click="popupVisible = true">
        <div class="des_input">
          <span>预留手机号：</span>
          <input type="text" placeholder="请选择预留手机号" v-model="affirmPhone" disabled>
        </div>
        <img src="../home/images/fanhui1@2x.png" alt="">
      </div>
      <!--手机号弹窗-->

      <mt-popup
        v-model="popupVisible"
        position="bottom" class="phone_popup" :closeOnClickModal="closeModal">
        <div class="phone_list" @click="choicePhone(item)" v-for="(item,pindex) in assort" :key="pindex">{{item.omitPhone}}</div>
        <div class="phone_close" @click="popupVisible=false">取消</div>
      </mt-popup>

      <div class="li_li teshu">
        <span>验 证 码&nbsp;:</span>
        <input class="code_input" type="tel" placeholder="请输入验证码" v-model.trim="codeNumber" maxlength="4">
        <div class="btn">
          <button @click="getCode" :disabled="time ==0 || time==60 ? false : true ">
            <span v-show="sendMsgDisabled">{{time + 's后获取'}}</span>
            <span v-show="!sendMsgDisabled">{{msg}}</span>
          </button>
        </div>
      </div>
      <div class="note_explain">
        <span>注意说明：如果预留号码未使用，请去业主变更</span>
      </div>
      <div class="get_div">
        <button :class="[dis === true ? 'disabled':'']" @click="keepData()"><span>保存</span></button>
      </div>
    </div>
  </div>
</template>
<style lang="scss">

  .result {
    padding-top: 40px;
    .head {
      background: #f4f4f4;
      span {
        font-size: 15px;
        line-height: 44px;
        margin-left: 10px;
      }
    }
    .home_show {
      background: #fff;
      ul {
        li {
          margin: 0 10px;
          line-height: 44px;
          span:first-child {
            font-size: 15px;
          }
          span:last-child {
            font-size: 14px;
            float: right;
            color: #777;
          }
        }
        li:last-child{
          border-bottom: none;
        }
      }
    }
    .result_show {
      background: #fff;
      ul {
        li {
          margin: 0 10px;
          line-height: 44px;
          span:first-child {
            font-size: 15px;
          }
          span:last-child {
            font-size: 14px;
            float: right;
            color: #777;
          }
        }
        li:last-child{
          border-bottom: none;
        }
      }
    }
    .phone_part{
     margin: 0 10px;
      .phone_choice{
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        .des_input{
          display: inline-flex;
          align-items: center;
          span{
            font-size: 15px;
          }
          input{
            background: #ffffff;
            border: none;
            outline: none;
            font-size: 15px;
            padding: 10px 0;
          }
        }
        img{
          width: 8px;
          height: 15px;
          transform: rotate(90deg);
        }
      }
      .phone_popup{
        width: 100%;
        height: 300px;
        background: #ffffff;
        border-radius: 15px 15px 0 0;
        .phone_list{
          padding: 16px 0;
          font-size: 15px;
          text-align: center;

          border-bottom: 1px solid #f2f2f2;
        }
        .phone_close{
          width: 100%;
          border-top: 10px solid #f2f2f2;
          position: fixed;
          bottom: 0;
          padding: 20px 0;
          text-align: center;
          font-size: 16px;
          letter-spacing: 5px;
        }
      }
     .li_li {
        font-size: 1.3em;
        height: 48px;
        line-height: 48px;
        position: relative;
        width: 100%;
        span {
          &.span-color {
            font-size: 1.2rem;
            color: #888;
          }
        }
        input {
          width: 42%;
          border: none;
          outline: none;
          font-size: 1.2rem;
          color: #888;
          &.code_input {
            width: 30%;
          }
        }
        &.teshu {
          display: flex;
          span {
            flex: 0 0 80px;
          }
          .code_input {
            flex: 1;
            padding: 0;
            font-size: 15px;
          }
          .btn {
            button{
              border: 1px solid #0f7dd5;
              background: #ffffff;
              outline: none;
              padding: 10px 10px;
              color: #0f7dd5;
            }
          }
        }
      }
      .note_explain{
        padding: 10px 0;
        span{
          font-size: 13px;
          color: #888888;
        }
      }
      .get_div{
        padding: 10px 0;
        button{
          background: #0078de;
          outline: none;
          width: 100%;
          span {
            line-height: 44px;
            font-size: 15px;
            color: #fff;
          }
        }
        .disabled{
          background: #999999;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import {Toast, Indicator} from 'mint-ui'
  import {sendResrveCode, keepHouseInfo} from '../../api/my'

  export default {
    name: 'Result',
    data () {
      return {
        list: '',
        status: '', // 预留电话号码部分是否显示
        assort: [], // 手机号
        affirmPhone: '', // 所选电话号
        popupVisible: false, // 弹窗
        closeModal: false, // 点击遮罩层是否关闭
        codeNumber: '', // 验证码
        msg: '获取验证码',
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false,   // 按钮上的显示文本（false:显示为时间跳动的文本  true:显示为发送验证码）
        errorMsg: '', // 验证码接口返回回来的提示语
        dis: false // 防止按钮重复点击（false: 可点击  true：不可点击）

      }
    },
    created() {
      this.status = this.$route.params.status
      // console.log(this.status)
      this.getResultData()
    },
    methods: {
      getResultData() {
        const url = commonUrl.apihost + 'index.php/home/house_Auth/getOneHouse?id=' + this.$route.params.id
        this.$http.get(url).then(res => {
          if (res.data.code === 200) {
            this.list = res.data.data[0]
            const phoneArr = res.data.data[0].phone
            // console.log(phoneArr)
            for (var i = 0; i < phoneArr.length; i++) {
              var reg = /^(\d{3})\d{4}(\d{4})$/
              var tel = phoneArr[i].phone.replace(reg, '$1****$2')
              // console.log(phoneArr[i])
              phoneArr[i]['omitPhone'] = tel
              this.assort = phoneArr
              // console.log(this.assort)
            }
          }
        })
      },
      // 选定电话号码
      choicePhone(item) {
        // console.log(item.phone)
        this.affirmPhone = item.phone
        this.popupVisible = false
      },
      //  获取验证码
      getCode () {
        if (!this.affirmPhone) {
          Toast({
            message: '请选择预留手机号！',
            position: 'middle',
            duration: 3000
          })
          return
        } else {
          sendResrveCode(this.affirmPhone).then(res => {
            if (res.code === 400) {
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              window.clearInterval(interval)
            }
          })
          let me = this
          me.sendMsgDisabled = true  // 点击时变成true 那么就是显示多少秒后获取
          let interval = window.setInterval(function () {
            if ((me.time--) <= 0) {
              me.time = 60
              me.sendMsgDisabled = false
              window.clearInterval(interval)
            }
            me.msg = '重新获取'
          }, 1000)
        }
      },
      // 保存
      keepData() {
        if (this.dis === false) {
          if (!this.codeNumber) {
            Toast({
              message: '请输入验证码！',
              position: 'middle',
              duration: 2000
            })
            return
          }
          this.dis = true
          Indicator.open({
            text: '..保存中..',
            spinnerType: 'fading-circle'
          })
          keepHouseInfo(this.$route.params.id, this.affirmPhone, this.codeNumber).then(res => {
            // console.log(res)
            if (res.code === 200) {
              Indicator.close()
              Toast({
                message: res.data,
                position: 'middle',
                duration: 2000
              })
              this.$router.back()
            }
            if (res.code === 400) {
              Indicator.close()
              this.dis = false
              Toast({
                message: res.error,
                position: 'middle',
                duration: 2000
              })
              return
            }
          })
        }
      }
    },
    components: {
      headTop
    }
  }
</script>
